<template>
  <page-frame>
    <div class="careLeaveSeeting">
      <div class="toptitle">
        <div class="left">照护等级配置</div>
        <div class="right">
          <div class="btns">
            <el-button class="lightGreenBtn" @click="addCare()">新增照护等级</el-button>
          </div>
        </div>
      </div>
      <div class="borderT"></div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="lName"
          label="照护等级"
          width="">
        </el-table-column>
        <el-table-column
          prop="lDescription"
          label="服务描述"
          width="">
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <!--template子组件，通过scope.row拿到整列的内容，@click.stop="edit(scope.row)必须写的-->
          <template scope="scope">
            <el-button type="text" size="small" @click.stop="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click.stop="remove(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="照护等级" :visible.sync="dialogTableVisible" :before-close="handleClose">
        <div class="consultingNewComplaint">
          <div class="file-content">
            <el-form :model="dialogRuleForm" :rules="rules" ref="dialogRuleForm" label-width="160px">
              <el-form-item label="所属机构:" prop="name">
                <el-input v-model="dialogRuleForm.name" disabled></el-input>
              </el-form-item>
              <el-form-item label="照护等级名称:" prop="lName">
                <el-input v-model="dialogRuleForm.lName" disa bled placeholder="请输入照护等级名称" :disabled="ways"></el-input>
              </el-form-item>
              <el-form-item label="照护等级描述" prop="lDescription ">
                <el-input v-model="dialogRuleForm.lDescription" disabled placeholder="请输入照护等级描述"
                          :disabled="ways"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
        </span>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="del">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </page-frame>
</template>

<script>
  import careLevelApi from '../../service/serManagement/careLevelApi'
  import staffApi from '../../service/corporation/staffApi'
  export default {
    data() {
      return {
        isAdd: true,
        dialogTableVisible: false,
        tableData: [
          {
            lName: "",//照护等级名称
            lDescription: "",//照护等级描述
            lId: 0,//照护等级id
            isParent: 0,
            orgId: 0
          },
        ],
        loginInfo: {},
        currentCateObj: {},
        ways: false,
        emps: [],
        //提交的表单，上传到后端的数据
        ruleForm: {
          lDescription: "",//照护等级描述
          lName: "",//照护等级名称
          name: ""//机构名称
        },
        dialogRuleForm: {
          lId: 0,
          lDescription: "",//照护等级描述
          lName: "",//照护等级名称
          name: ""//机构名称
        },
        //判断照护等级是否填写
        rules: {
          lName: [
            {required: true, message: '请输入照护等级名称', trigger: 'blur'},
          ],
        },
      }
    },
    methods: {
      init() {
        this.getCurrentOrgInfo();
      },
      /**
       * 判断当前机构是否为父机构（0：父机构，非0：子机构）
       */
      getCurrentOrgInfo() {
        let self = this;
        staffApi.getLoginPersonInfo().then(
          (response) => {
            if (response.data.status == 200) {
              self.loginInfo = response.data.data;
              self.loadTableData();
            } else {
            }
          },
        );
      },
      /**
       * 加载页面数据
       */
      loadTableData() {
        let self = this;
        careLevelApi.listCareLevel().then(
          (response) => {
            if (response.data.status == 200) {
              self.tableData = response.data.data;
            } else {
            }
          },
        );
      },
      /**
       * 新增跳转
       **/
      addCare() {
        this.dialogTableVisible = true;
        this.dialogRuleForm.name = this.loginInfo.orgName;
        this.dialogRuleForm.lName = '';
        this.dialogRuleForm.lId = 0;
        this.dialogRuleForm.lDescription = '';
        this.isAdd = true;
      },

      /**
       * 编辑
       */
      edit(row) {
        this.dialogTableVisible = true;
        this.$refs['dialogRuleForm'].resetFields();
        this.dialogRuleForm.lId = row.lId;
        this.dialogRuleForm.name = this.loginInfo.orgName;
        this.dialogRuleForm.lName = row.lName;
        this.dialogRuleForm.lDescription = row.lDescription;
        this.isAdd = false;
      },
      /**
       * 删除
       */
      remove(row) {
        let self = this;
        self.$confirm('是否要删除当前照护等级', '删除照护等级', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          careLevelApi.removeCareLevel(row.lId).then(
            (response) => {
              if (response.data.data.msg == "0") {
                open()
                {
                  self.$message('当前照护等级：' + row.lName + '下存在部门会员，请先全部移除会员后再删除', '删除提醒', {
                    confirmButtonText: '确定',
                    callback: action => {
                      self.$message({
                        type: 'warning',
                        message: '已取消删除'
                      });
                    }
                  });
                }
                ;
              } else if (response.data.status == 200) {
                self.$message({
                  type: 'success',
                  message: '照护等级删除成功'
                });
                this.loadTableData();
              }
            },
          );
        }).catch(() => {
          self.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      /**
       * 提交
       */
      submit(dialogRuleForm) {
        this.$refs[dialogRuleForm].validate((valid) => {
          if (valid) {
            if (!this.isAdd) {
              //编辑
              careLevelApi.updateCareLevel(this.dialogRuleForm).then(
                (response) => {
                  if (response.data.status == 200) {
                    this.$message({
                      message: '提交成功',
                      type: 'success'
                    });
                    this.loadTableData();
                    this.dialogTableVisible = false;
                  } else {
                    this.loadTableData();
                    this.dialogTableVisible = true;
                  }
                }
              );
            } else {
              //新增
              careLevelApi.saveCareLevel(this.dialogRuleForm).then(
                (response) => {
                  if (response.data.status == 200) {
                    this.$message({
                      message: '提交成功',
                      type: 'success'
                    });
                    this.loadTableData();
                    this.dialogTableVisible = false;
                  } else {
                    this.loadTableData();
                    this.dialogTableVisible = true;
                  }
                }
              );
            }
          } else {
            return false;
          }
        });
      },
      confirm() {
        this.submit('dialogRuleForm');
      },
      del() {
        this.dialogTableVisible = false;
        this.$refs['dialogRuleForm'].resetFields();
        this.loadTableData();
      },
      handleClose(done) {
        this.$refs['dialogRuleForm'].resetFields();
        done();
      },
    },
    mounted: function () {
      this.init();
    },
  };
</script>
<style>
  .consultingNewComplaint .el-autocomplete {
    width: 100%;
  }

  .consultingNewComplaint .edit .el-form-item__error {
    margin-top: 100px;
  }

  .careLeaveSeeting .el-dialog--small {
    width: 35%;

  }
</style>


